<template>
    <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import OSM from 'ol/source/OSM'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import {OverviewMap, defaults as defaultControls} from 'ol/control'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap: function () {
      const source = new OSM()
      const overviewMapControl = new OverviewMap({
        layers: [
          new TileLayer({
            source: source
          })
        ]
      })
      // eslint-disable-next-line
      const map = new Map({
        controls: defaultControls().extend([overviewMapControl]),
        layers: [
          new TileLayer({
            source: source
          })
        ],
        target: 'map',
        view: new View({
          center: [500000, 6000000],
          zoom: 7
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
